<template>
  <div class="water-info-box">
    <div class="water-info-top">
      <div class="img-left-box">
        <ReservoirCrossSectionImgV2 :profileData="state.profileData2" :levelShow="true" />
        <!-- <img src="@/assets/images/dispatch/water_img.png" /> -->
      </div>
      <div class="tabs-right-box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :stretch="true">
          <el-tab-pane label="基础指标" name="first">
            <div class="basic-index-box">
              <div class="content-info">
                <div class="info-left">
                  <div class="key-value">
                    <div class="key">允许壅高水位 (m)：</div>
                    <div class="value">{{ state.ResvBaseInd?.dambase || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">警 戒 水 位 (m)：</div>
                    <div class="value">{{ state.ResvBaseInd?.wrz || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">允 许最高水位 (m)：</div>
                    <div class="value">{{ state.ResvBaseInd?.damwidth || '--' }}</div>
                  </div>
                </div>
                <div class="info-right">
                  <div class="key-value">
                    <div class="key">相应库容（百万m3 ）：</div>
                    <div class="value">{{ state.ResvBaseInd?.dambasev || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">相应库容（百万m3 ）：</div>
                    <div class="value">{{ state.ResvBaseInd?.wrzv || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">相应库容（百万m3 ）：</div>
                    <div class="value">{{ state.ResvBaseInd?.damwidthv || '--' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="设计指标" name="second">
            <div class="design-index-box">
              <div class="content-left">
                <div class="key-value">
                  <div class="key">校核洪水位（m）：</div>
                  <div class="value">{{ state.ResvDesignInd?.chfllv || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">设计洪水位（m）：</div>
                  <div class="value">{{ state.ResvDesignInd?.dsfllv || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">兴利水位 （m）：</div>
                  <div class="value">{{ state.ResvDesignInd?.ngsl || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">死水位 （m）：</div>
                  <div class="value">{{ state.ResvDesignInd?.ddwtlv || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">防洪高水位 (m)：</div>
                  <div class="value">{{ state.ResvDesignInd?.fldz || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">拦洪库容（百万m3 ）：</div>
                  <div class="value">{{ state.ResvDesignInd?.lhkr || '--' }}</div>
                </div>
              </div>
              <div class="content-right">
                <div class="key-value">
                  <div class="key">总库容（百万m3）：</div>
                  <div class="value">{{ state.ResvDesignInd?.xhst || '--' }}</div>
                </div>
                <!-- <div class="key-value">
                  <div class="key">设计水位库容（百万m3 ）：</div>
                  <div class="value">0000</div>
                </div> -->
                <div class="key-value">
                  <div class="key">兴利库容（百万m3 ）：</div>
                  <div class="value">{{ state.ResvDesignInd?.efst || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">死库容（百万m3 ）：</div>
                  <div class="value">{{ state.ResvDesignInd?.ddst || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">调洪库容（百万m3 ）：</div>
                  <div class="value">{{ state.ResvDesignInd?.flzst || '--' }}</div>
                </div>
                <div class="key-value">
                  <div class="key">防洪库容（百万m3 ） ：</div>
                  <div class="value">{{ state.ResvDesignInd?.fldcp || '--' }}</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="调度指标" name="third">
            <div class="dispatch-index-box">
              <el-table :data="state.ResvDispatchInd" border style="width: 100%">
                <el-table-column prop="fstpnm" label="汛限类型" align="center" width="80" />
                <el-table-column prop="fsltdz" label="汛限水位" align="center" />
                <el-table-column
                  prop="fsltdw"
                  label="汛限库容(百万m³)	"
                  align="center"
                  width="200"
                />
                <el-table-column prop="xqdate" label="汛限日期" align="center" />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="water-info-bottom">
      <div class="title">水位库容曲线/水位泄量关系</div>
      <div class="bottom-box">
        <!-- 水位库容曲线 -->
        <div class="bottom-item">
          <!-- <StorageCurve :storageCurveData="state.storageCurveData" /> -->
          <dispach-water-level
            :x-labels="state.storageCurveData.z"
            :y-values="state.storageCurveData.capacity"
          />
        </div>

        <div class="bottom-item">
          <!-- 水位泄流关系 -->
          <!-- <StageDischargeRelationV2
            :stageDischargeData="state.stageDischargeRelationDataV2"
            :selectWidth="selectWidth"
          /> -->
          <dispach-water-discharge
            :x-labels="state.stageDischargeRelationDataV2.stageInfo"
            :y-values="state.stageDischargeRelationDataV2.q"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import emitter from '@/utils/bus'
import axios from 'axios'
import dispachWaterLevel from '@/components/app-echart/dispach-water-level.vue'
import dispachWaterDischarge from '@/components/app-echart/dispach-water-discharge.vue'
import {
  // 查询水库基础信息
  getResvBaseInfo,
  // 查询水库基础指标
  getResvBaseInd,
  // 查询水库设计指标
  getResvDesignInd,
  // 查询水库调度指标
  getResvDispatchInd,
  // 查询水库水位库容曲线
  getResvZvLine,
  // 查询水库水位泄流曲线
  getResvZqLine
} from '@/services/modules/dispatch-manage'
const activeName = ref('first')
const state = reactive({
  dispachInfo: [],
  // 基础信息
  ResvBaseInfo: {},
  // 基础指标
  ResvBaseInd: {},
  // 水库设计指标
  ResvDesignInd: {},
  // 水库调度指标
  ResvDispatchInd: [],
  profileData2: {},
  // 水库 刨面
  Information: {},
  // 库容曲线
  storageCurveData: {
    z: [],
    capacity: []
    // unit: {
    //   z: 'm',
    //   capacity: '百万m³'
    // },
    // currentZ: '115.0',
    // currentCapacity: '578.000'
  },
  // 水位泄流曲线
  stageDischargeRelationDataV2: {
    // 水位
    stageInfo: [],
    // 流量
    q: []
    // // 警戒水位
    // zWarn: '117',
    // // 保证水位
    // zGuarantee: '119'
  }
})
const props = defineProps({
  // blkcd
  blkcdWater: {
    type: Number,
    default: ''
  },
  rscd: {
    type: String,
    default: ''
  },
  scidObj: {
    type: Object,
    default: () => {}
  }
})
onMounted(() => {
  nextTick(() => {
    emitter.emit('initEcharts')
  })
})
function getWaterLevel(val) {
  console.log(33336666)

  return new Promise((resolve, reject) => {
    axios(
      `${checkedWater}?beginTime=${props.scidObj.times.fcStart}&endTime=${props.scidObj.times.fcEnd}&rscd=${val}`
    ).then((res) => {
      console.log(res.data, 12333)
      let data = res.data.data
      state.profileData2 = {
        z: data.rz ? parseFloat(data.rz)?.toFixed(2) : '-', // 水位
        pondage: data.w || '-', // 蓄水量
        zCheck: data.ckflz ? parseFloat(data.ckflz)?.toFixed(2) : '-', // 校核洪水位
        zDamup: data.all_raise_lev ? parseFloat(data.all_raise_lev)?.toFixed(2) : '-', // 允许壅高水位
        zAllow: data.all_max_lev ? parseFloat(data.all_max_lev)?.toFixed(2) : '-', // 允许最高水位
        control: data.flcocap ? (parseFloat(data.flcocap) / 100)?.toFixed(2) : '-', // 防洪库容
        controlN: data.allcap ? (parseFloat(data.allcap) / 100)?.toFixed(2) : '-', // 实时防洪容
        retention: data.flrecap ? (parseFloat(data.flrecap) / 100)?.toFixed(2) : '-', // 拦洪库容
        regulation: data.storflcap ? (parseFloat(data.storflcap) / 100)?.toFixed(2) : '-', // 调洪库容
        zDead: data.ddz ? parseFloat(data.ddz)?.toFixed(2) : '-', // 死水位
        zXunmoLimit: data.fsltdz ? parseFloat(data.fsltdz)?.toFixed(2) : '-', // 汛末水位
        zDesign: data.dsflz ? parseFloat(data.dsflz)?.toFixed(2) : '-', // 设计洪水位
        zWarn: data.warning_stag ? parseFloat(data.warning_stag)?.toFixed(2) : '-', // 警洪水位
        zFloodH: data.normz ? parseFloat(data.normz)?.toFixed(2) : '-', // 防洪高水位
        zAdjustment: data.qdlz ? parseFloat(data.qdlz)?.toFixed(2) : '-', // 起调水位
        zNasl: data.actz ? parseFloat(data.actz)?.toFixed(2) : '-', // 兴利水位
        capacity: data.ttcp ? parseFloat(data.ttcp)?.toFixed(2) : '-', // 总库容
        efst: data.actcp ? parseFloat(data.actcp)?.toFixed(2) : '-', //兴利库容
        ddst: data.ddcp ? parseFloat(data.ddcp)?.toFixed(2) : '--' // 死库容
      }
    })
  })
}
watch(
  () => {
    props.blkcdWater
  },
  () => {
    handleGetResvInfo(props.blkcdWater)
  },
  {
    immediate: true,
    deep: true
  }
)
watch(
  () => {
    props.rscd
  },
  () => {
    getWaterLevel(props.rscd)
  },
  {
    immediate: true,
    deep: true
  }
)

function handleGetResvInfo(blkcd) {
  // 查询水库基础信息
  // getResvBaseInfo({ blkcd }).then((res) => {
  //   if (res.code == 200) {
  //     state.ResvBaseInfo = res.data
  //   }
  // })
  // 查询水库基础指标
  getResvBaseInd({ blkcd }).then((res) => {
    if (res.code == 200) {
      state.ResvBaseInd = res.data
    }
  })
  // 查询水库设计指标

  getResvDesignInd({ blkcd }).then((res) => {
    if (res.code == 200) {
      state.ResvDesignInd = res.data
    }
  })
  // 查询水库调度指标

  getResvDispatchInd({ blkcd }).then((res) => {
    if (res.code == 200) {
      state.ResvDispatchInd = res.data
    }
  })
  // 查询水库水位库容曲线
  getResvZvLine({ blkcd }).then((res) => {
    if (res.code == 200) {
      console.log(res.data, 222223)
      res.data.forEach((e) => {
        // 水位
        state.storageCurveData.z.push(String(e.level))
        // 库容
        state.storageCurveData.capacity.push(String(e.volume))
      })
      console.log(state.storageCurveData, 7777)
    }
  })

  // 查询水库水位泄流曲线
  getResvZqLine({ blkcd }).then((res) => {
    if (res.code == 200) {
      res.data.forEach((e) => {
        // 水位
        state.stageDischargeRelationDataV2.stageInfo.push(String(e.level))
        // 泄流
        state.stageDischargeRelationDataV2.q.push(String(e.q))
      })
      console.log(state.stageDischargeRelationDataV2, 77717)
    }
  })
  nextTick(() => {
    emitter.emit('initEcharts')
  })
}

// let storageCurveData = {
//   // 水位
//   z: [
//     '262.07',
//     '264.07',
//     '265.02',
//     '266.07',
//     '268.07',
//     '270.07',
//     '272.07',
//     '274.07',
//     '276.07',
//     '278.07',
//     '279.82',
//     '280.82',
//     '282.82',
//     '283.82',
//     '284.82',
//     '285.82'
//   ],
//   // z: [
//   //   '113.0',
//   //   '114.5',
//   //   '115.0',
//   //   '116.5',
//   //   '117.0',
//   //   '118.5',
//   //   '119.0',
//   //   '120.5',
//   //   '121.5',
//   //   '122.5',
//   //   '123.0',
//   //   '124.5'
//   // ],
//   capacity: [
//     '209.000',
//     '380.000',
//     '578.000',
//     '804.000',
//     '1059.000',
//     '1328.000',
//     '1613.000',
//     '1911.000',
//     '2231.000',
//     '2577.000',
//     '2990.000',
//     '3649.000'
//   ],
//   unit: {
//     z: 'm',
//     capacity: '百万m³'
//   }
// }
// let stageDischargeRelationDataV2 = {
//   name: ['报'],
//   // 水位
//   stageInfo: [
//     [
//       '113.000',
//       '113.500',
//       '114.000',
//       '114.500',
//       '115.000',
//       '115.500',
//       '116.000',
//       '115.400',
//       '114.200',
//       '113.100',
//       '112.500',
//       '111.500'
//     ],
//     [
//       '114.000',
//       '115.500',
//       '116.000',
//       '113.500',
//       '114.000',
//       '114.500',
//       '115.000',
//       '116.500',
//       '117.500',
//       '118.500',
//       '119.000',
//       '119.500'
//     ]
//   ],
//   // 流量
//   q: [
//     [
//       '209.000',
//       '380.000',
//       '578.000',
//       '804.000',
//       '1059.000',
//       '1328.000',
//       '1613.000',
//       '1501.000',
//       '1431.000',
//       '1377.000',
//       '1290.000',
//       '649.000'
//     ],
//     [
//       '208.000',
//       '381.000',
//       '577.000',
//       '804.000',
//       '1059.000',
//       '1328.000',
//       '1613.000',
//       '1911.000',
//       '2231.000',
//       '2577.000',
//       '2990.000',
//       '3649.000'
//     ]
//   ],
//   // 警戒水位
//   zWarn: '117',
//   // 保证水位
//   zGuarantee: '119'
// }
// let selectWidth = 150
</script>

<style lang="less" scoped>
.water-info-box {
  width: 100%;
  height: 100%;
  .water-info-top {
    height: 300px;

    display: flex;
    .img-left-box {
      width: 45%;
      // height: 320px;
      height: 100%;
      background: #0c2b51;
      margin-right: 20px;
      :deep(.reservoirCrossSectionImgV2) {
        // height: 100%;
        .reservoirContentV2 {
          margin-top: 0px;
        }
      }
      // img {
      //   width: 100%;
      //   height: 100%;
      // }
    }
    .tabs-right-box {
      flex: 1;
      .basic-index-box {
        margin-top: 20px;
        .key-value {
          display: flex;
          height: 30px;
          .key {
          }
          .value {
            color: #409eff;
          }
        }
        .content-header {
          margin-bottom: 30px;
          margin-left: 35px;
        }
        .content-info {
          display: flex;
          justify-content: space-between;
          .info-left {
            margin-left: 35px;
          }
          .info-right {
            margin-right: 35px;
          }
        }
      }
      .design-index-box {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .key-value {
          display: flex;
          height: 30px;
          .key {
          }
          .value {
            color: #409eff;
          }
        }
        .content-left {
          margin-left: 35px;
        }
        .content-right {
          margin-right: 35px;
        }
      }
      .dispatch-index-box {
        width: 100%;
        height: 100%;
        :deep(.el-table--fit) {
          margin-top: 10px;
          height: calc(100% - 10px) !important;
        }
      }
    }
  }
  .water-info-bottom {
    height: calc(50% - 5px);
    .title {
      color: #409eff;
      margin-top: 20px;
    }
    .bottom-box {
      // height: calc(100% - 30px);
      height: 300px;
      display: flex;
      margin-top: 10px;
      justify-content: space-around;
      .bottom-item {
        width: 100%;
        // height: 400px;
        height: 100%;
        // background: rgb(166, 214, 214);
        // background: #0c2b51;
      }
    }
  }
}
</style>
